<template>

  <el-container>
    <el-header>
      <Nav1></Nav1>
    </el-header>


    <el-container>
      <MyViewSideBar></MyViewSideBar>
      <el-main class="right-main">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名称:">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>

          <el-form-item label="账号 :">
            <el-input v-model="user.loginName" disabled></el-input>
          </el-form-item>


          <el-form-item label="用户性别:">
            <el-radio-group v-model="userInfo.genderId">
              <el-radio label="女" disabled></el-radio>
              <el-radio label="男" disabled></el-radio>
              <el-radio label="未知" disabled></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="qq号 :">
            <el-input v-model="userInfo.qq" disabled></el-input>
          </el-form-item>

          <el-form-item label="电话号码 :">
            <el-input v-model="userInfo.phoneNumber" disabled></el-input>
          </el-form-item>

          <el-form-item label="邮箱地址:">
            <el-input v-model="userInfo.email" disabled></el-input>
          </el-form-item>


          <el-form-item label="自我介绍:">
            <el-input type="textarea"  disabled v-model="userInfo.introduction"></el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改信息</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>


import {defineComponent} from "vue";
import MyViewSideBar from "@/components/MyView/MyViewSideBar.vue";
import Nav1 from "@/components/nav/Nav1.vue";
import {articleList, userInfo} from "@/utils/api";
import {parseTime} from "../../../public/FormatTime";

export default defineComponent({
  components: {Nav1, MyViewSideBar},
  data() {
    return {
      user: {
        loginName: '',
        password: '',
        userId: 1

      },
      userInfo: {
        username: '',
        userId: 1,
        genderId: 1,
        qq:'',
        phoneNumber:'',
        email:'',
        introduction: ''
      },

      userid: 0
    }
  },

  methods: {
    onSubmit() {
      this.$router.push('/changemessage');
    },

    async getUserInfo(){
      // 使用catch反向逻辑,避免过多逻辑嵌套
      const res = await userInfo(this.userid).catch(err => {
        // 提示错误, 终止执行
        return console.error(err)
      })
      console.log(res, '请求成功');

      this.userInfo = res.data.userInfo;
      // console.log(this.userInfo)
      for(let k in this.userInfo){
        if(k === 'genderId'){
          if(this.userInfo[k] === 1){
            this.userInfo.genderId = '女'
          }
          if(this.userInfo[k] === 2){
            this.userInfo.genderId = '男'
          }
          if(this.userInfo[k] === 3){
            this.userInfo.genderId = '未知'
          }
        }
      }

      this.user = res.data.user
      // console.log(this.user)

    }

  },
  mounted(){
    this.userid = sessionStorage.getItem('userId')
    this.getUserInfo()
  }


})
</script>


<style scoped>
.message {
  width: 100px;
  height: 100px;
  background-color: black;
}
.right-main{
  width: 800px;
  height: 100%;
  margin: 20px auto;
  background-color: #f8f8f8;
}
</style>
